<template>
  <div>
    <div style="background-color: #f8f8f9;padding: 10px;">
      <Row :gutter="10" type="flex" align="middle">
        <i-col span="6" v-show="defaultCard.postage">
          <Card :shadow="true">
            <p slot="title">默认策略</p>
            <div class="province">
              <span>省份：</span>
              <span>{{ defaultCard.provinceName }}</span>
            </div>
            <p>
              <span>邮费：</span>
              <span style="color: #ed3f14;">{{defaultCard.postage / 100}}￥</span>
            </p>
          </Card>
        </i-col>
        <i-col span="6" v-for="(postage, index) in postageData" :key="postage.id" style="margin-bottom: 16px;">
          <Card :shadow="true">
            <p slot="title">策略{{index + 1}}</p>
            <Poptip
              slot="extra"
              confirm
              placement="bottom"
              title="你确定移除该策略下的所有省份吗？"
              @on-ok="clearAll(index)">
              <a href="javascript:;">全部移除</a>
            </Poptip>
            <div class="province">
              <span>省份：</span>
              <Tag v-for="(item, index) in postage.provinceName" :key="index" closable @on-close="handleClose" :name="item">{{ item }}</Tag>
            </div>
            <p>
              <span>邮费：</span>
              <span style="color: #ed3f14;">{{postage.postage}}￥</span>
              <Poptip placement="top" width="200">
                <span class="update">修改邮费<Icon type="edit"></Icon></span>
                <div slot="content">
                  <InputNumber v-model="postagePrice[index]" :min="0"/>
                  <Button type="primary" @click="updatePostage(index)">确定</Button>
                </div>
              </Poptip>
              <span @click="addProToCard(index)">添加</span>
            </p>
          </Card>
        </i-col>
        <i-col span="6">
          <div class="add" @click="addStrategy">
            <Icon type="plus-circled"></Icon>添加策略
          </div>
        </i-col>
      </Row>
    </div>
    <Modal title="修改邮费" v-model="showAddModal" @on-ok="subUpdate">
      <Form :model="updateForm" :label-width="70" ref="updateForm">
        <FormItem label="选择省份" prop="province">
          <Select v-model="updateForm.province" multiple>
            <Option v-for="(pro, index) in provinceName" :key="index" :value="pro">{{pro}}</Option>
          </Select>
        </FormItem>
        <FormItem label="设置价格" prop="postage" v-show="isAdd">
          <InputNumber v-model="updateForm.postage" :min="0"/>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import province from '../../common/province'
export default {
  name: 'province-postage',
  data () {
    return {
      url: {
        list: '/branch/province/postage/setting/list',
        add: '/branch/province/postage/setting/add',
        update: '/branch/province/postage/update'
      },
      postageData: [],
      showAddModal: false,
      isAdd: true,
      // 记录点击的卡片在第几个
      index: null,
      provinceName: [],
      updateForm: {
        province: [],
        postage: null
      },
      addProvince: [],
      defaultCard: {},
      postagePrice: []
    }
  },
  methods: {
    addStrategy () {
      this.updateForm.postage = null
      this.isAdd = true
      this.showAddModal = true
      this.provinceName = this.defaultCard.provinceName ? this.defaultCard.provinceName.split(',') : []
    },
    addProToCard (index) {
      this.provinceName = []
      this.addProvince.forEach(item => {
        if (this.postageData[index].provinceName.indexOf(item) === -1) {
          this.provinceName.push(item)
        }
      })
      this.updateForm.postage = this.postageData[index].postage
      this.isAdd = false
      this.showAddModal = true
    },
    // 清除一个策略下的所有省份
    clearAll (index) {
      let params = {
        name: this.postageData[index].provinceName,
        postage: 100 * 100
      }
      this.$ajax.post(this.url.update, params)
        .then(res => {
          if (res.data.success) {
            this.initData()
            this.$Message.success('删除成功')
          }
        })
    },
    // 修改邮费方法
    updatePostage (index) {
      if (this.postagePrice[index] === this.postageData[index].postage) {
        return
      }
      let params = {
        name: this.postageData[index].provinceName,
        postage: this.postagePrice[index] * 100
      }
      this.$ajax.post(this.url.update, params)
        .then(res => {
          if (res.data.success) {
            this.initData()
            this.$Message.success('更新成功')
          }
        })
    },
    subUpdate () {
      if (this.updateForm.postage === null) {
        this.$Message.warning('邮费不能为空')
        return
      }
      let name = []
      this.updateForm.province.forEach(item => {
        name.push(item)
      })
      if (!name[0]) {
        return
      }
      let params = {
        name,
        postage: this.updateForm.postage * 100
      }
      this.$ajax.post(this.url.update, JSON.stringify(params)).then((res) => {
        if (res.data.success) {
          this.initData()
          this.updateForm.province = []
          this.updateForm.postage = null
          this.$Message.success('修改成功')
        }
      })
    },
    handleClose (e, name) {
      let params = {
        name: [name],
        postage: 100 * 100
      }
      this.$ajax.post(this.url.update, params)
        .then(res => {
          if (res.data.success) {
            this.initData()
            this.$Message.success('修改成功')
          }
        })
    },
    // 初始化数据，跟新成功之后调用刷新界面
    initData () {
      this.$ajax.post(this.url.list).then((res) => {
        if (res.data.success) {
          document.body.click()
          this.defaultCard = {}
          for (let i = 0; i < res.data.data.length; i++) {
            if (res.data.data[i].postage === 10000) {
              this.defaultCard = res.data.data.splice(i, 1)[0]
              break
            }
          }
          this.postagePrice = []
          res.data.data.forEach(item => {
            item.postage /= 100
            this.postagePrice.push(item.postage)
            item.provinceName = item.provinceName.split(',')
          })
          this.postageData = res.data.data
        }
      })
    }
  },
  created () {
    this.initData()
    province.forEach(item => {
      this.addProvince.push(item.item_name)
    })
  }
}
</script>

<style scoped>
.update{
  cursor: pointer;
  margin-right: 10px;
  font-size: 12px;
}
  .province{
    margin-bottom: 8px;
    /*max-height: 60px;*/
    /*height: 60px;*/
    /*overflow-y: auto;*/
  }
  .add{
    width: 300px;
    height: 172px;
    border-radius: 10px;
    border: 1px dotted #dddee1;
    text-align: center;
    line-height: 172px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
  }
  .add:hover{
    border: 1px dotted #2d8cf0;
    color: #2d8cf0;
  }
</style>
